<template xmlns="http://www.w3.org/1999/html">
  <div style="margin: 0px 30px;padding: 30px 0px">
    <h2 style="text-align: center">查阅结果</h2>
    <el-table
      :data="backbooks"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <div v-show="props.row.isbn === 9787020137398" style="text-align: center"   width="260px"
                 height="350px">
              <img src="../../assets/books/book1.jpg">
            </div>
            <div v-show="props.row.isbn === 9787502839365" style="text-align: center">
              <img src="../../assets/books/水浒传.jpg">
            </div>
            <div v-show="props.row.isbn === 9787802204423" style="text-align: center">
              <img src="../../assets/books/西游记.jpg">
            </div>
            <div v-show="props.row.isbn === 9787535447340" style="text-align: center">
              <img src="../../assets/books/文化苦旅.jpg">
            </div>
            <div v-show="props.row.isbn === 9787108063106" style="text-align: center">
              <img src="../../assets/books/我们仨.jpg">
            </div>
            <div v-show="props.row.isbn === 9787547732250" style="text-align: center">
              <img src="../../assets/books/罗马帝国衰亡史.jpg">
            </div>
            <div v-show="props.row.isbn === 9787502839369" style="text-align: center">
              <img src="../../assets/books/我的童年长在树上.jpg">
            </div>
            <div v-show="props.row.isbn === 9787560575780" style="text-align: center">
              <img src="../../assets/books/在人间.jpg">
            </div>
            <div v-show="props.row.isbn === 9787539796642" style="text-align: center">
              <img src="../../assets/books/童年-曹文轩.jpg">
            </div>
            <div v-show="props.row.isbn === 9787532743124" style="text-align: center">
              <img src="../../assets/books/挪威的森林.jpg">
            </div>
            <div v-show="props.row.isbn === 9787513241823" style="text-align: center"  width="260px" height="350px">
              <img src="../../assets/books/道家文化与中医学.jpg">
            </div>
            <div v-show="props.row.isbn === 9787540484880" style="text-align: center">
              <img src="../../assets/books/苏东坡传.jpg">
            </div>
            <div v-show="props.row.isbn === 9787511727039" style="text-align: center">
              <img src="../../assets/books/安娜·卡列尼娜.jpg">
            </div>
            <div v-show="props.row.isbn === 9787538761009" style="text-align: center">
              <img src="../../assets/books/战争与和平.jpg">
            </div>
            <div v-show="props.row.isbn === 9787506365437" style="text-align: center">
              <img src="../../assets/books/活着.jpg">
            </div>
            <div v-show="props.row.isbn === 9787538760590" style="text-align: center">
              <img src="../../assets/books/月亮与六便士.jpg">
            </div>
            <div v-show="props.row.isbn === 9787560574417" style="text-align: center">
              <img src="../../assets/books/我的大学.jpg">
            </div>
            <el-form-item label="书籍ISBN:">
              <span class="showWord">{{ props.row.isbn }}</span><br/>
            </el-form-item>
            <el-form-item label="书籍名:">
              <span class="showWord">{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="书籍作者:">
              <span class="showWord">{{ props.row.writer }}</span>
            </el-form-item>
            <el-form-item label="书籍出版日期:">
              <span class="showWord">{{ props.row.publishDate }}</span>
            </el-form-item>
            <el-form-item label="书籍出版社:">
              <span class="showWord">{{ props.row.publisher }}</span>
            </el-form-item>
            <el-form-item label="书籍科目:">
              <span class="showWord">{{ props.row.subject }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="书籍名"
        prop="name">
      </el-table-column>
      <el-table-column
        label="书籍作者"
        prop="writer">
      </el-table-column>
      <el-table-column
        label="书籍出版社"
        prop="publisher">
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      :total="this.total * 10"
      :current-page.sync="page"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
export default {
name:'TextofBookMsg',
data(){
  return{
    ip:'',
    page:0,
    total:0,
    showHowMany:10,
    intervalId:"",
    keywordM:'',
    backbooks:[],
  }
},
methods:{
  handleCurrentChange(){
    this.ip = localStorage.getItem('ip')
    if(this.keywordM === "all"){
      this.$axios.get( this.ip +'/book/'+this.page + '/' + this.showHowMany)
        .then((response)=>{
          this.backbooks = response.data.pageInfo.list
          this.total = (response.data.pageInfo.total - response.data.pageInfo.total % this.showHowMany) / this.showHowMany
          if(response.data.pageInfo.total % this.showHowMany){this.total += 1}
        })
        .catch((error)=>{
          console.log(error);
        });}
    else{
      this.$axios.get(this.ip + '/book/search/' + this.keywordM).then((res)=>{
        this.backbooks = res.data
        this.total = (res.data.length - res.data.length % this.showHowMany) / this.showHowMany
        if(res.data.length % this.showHowMany){this.total += 1}
      })
        .catch((err)=>{
          console.log(err)
        })
    }
  }
},
watch:{
  keywordM:{
    handler(val){
      this.ip = localStorage.getItem('ip')
      if(val === "all"){
      this.$axios.get( this.ip +'/book/'+this.page + '/' + this.showHowMany)
        .then((response)=>{
          this.backbooks = response.data.pageInfo.list
          this.total = (response.data.pageInfo.total - response.data.pageInfo.total % this.showHowMany) / this.showHowMany
          if(response.data.pageInfo.total % this.showHowMany){this.total += 1}
        })
        .catch((error)=>{
          console.log(error);
        });}
        else{
      this.$axios.get(this.ip + '/book/search/' + this.keywordM).then((res)=>{
        this.total = (res.data.length - res.data.length % this.showHowMany) / this.showHowMany
        if(res.data.length % this.showHowMany){this.total += 1}
        this.backbooks = res.data
        console.log(res)
      })
        .catch((err)=>{
          console.log(err)
        })
      }
    }
  }
},
mounted(){
  this.ip = localStorage.getItem('ip')
  this.keywordM = this.$route.params.bookMsg
  this.intervalId =setInterval(()=>{
    this.$bus.$on('booksearch',(data)=>{
      this.keywordM = data
    })
  },100)
  this.$axios.get( (this.ip +'/book/1/' + this.showHowMany)).then((response)=>{
    this.total = (response.data.pageInfo.total - response.data.pageInfo.total % this.showHowMany) / this.showHowMany
    if(response.data.pageInfo.total % this.showHowMany){this.total += 1}
    console.log(this.total)
  }).catch((error)=>{
    console.log(error)
  })
  console.log(this.page)
},
beforeDestroy() {
  clearInterval(this.intervalId)
  }

}

</script>

<style scoped>
.showWord{
  font-weight: 900;
}
.el-form--inline .el-form-item {
  display: inline-block;
  margin-left: 40%;
  margin-right: 20%;
  vertical-align: top;
}
img{
  width: 260px;
  height: 350px;
}
</style>
